<template>
	<view class="item-wrap" v-if="Object.keys(item).length>0">
		<view class="item-title yf-flex-left">
			<template v-if="types==0">
				<view class="item-name conceal1">
					{{item.userName}}
				</view>
				<view class="item-section yf-flex-center">
					{{item.deptName}}
				</view>
			</template>
			<template v-if="types==1">
				<view class="item-name conceal1">
					{{item.postDate.slice(0,10)}}
				</view>
			</template>
			<view class="item-status yf-flex-center" :class="[`item-status${item.status}`]">
				{{STATUS[item.status]}}
			</view>
		</view>
		<view class="item-content">
			<view class="item-content-text">
				开始时间：{{item.startTime}}
			</view>
			<view class="item-content-text">
				结束时间：{{item.endTime}}
			</view>
		</view>
		<view class="item-bottom yf-flex-left">
			<image src="/static/common/section_icon.png" mode="" class="item-icon"></image>
			<view class="item-addr conceal1">
				{{item.desc}}
			</view>
			<view class="item-btn yf-flex-center" :class="[types==0&&item.status==0?`item-btn0`:'']"
				@click="jumpTo('outDetail',{types,info:JSON.stringify(item)})">
				{{types==1?'查看':STATUSBTN[item.status]}}
			</view>
		</view>
	</view>
</template>
<script>
	// 0 待审核 1 已通过 2 未通过
	const STATUS = ['待审核', '已通过', '未通过']
	const STATUSBTN = ['审核', '查看', '查看']
	export default {
		props: {
			types: {
				type: Number,
				default: 0, //0审批列表1我的审批列表
			},
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				STATUS,
				STATUSBTN 
			};
		},
		methods: {
			// 跳转
			jumpTo(url, param) {
				this.$Router.navigateTo(url, param)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-wrap {
		width: 100%;
		border-radius: 20rpx;
		background: #fff;
		box-shadow: 0px 2rpx 6rpx 0px rgba(180, 180, 180, 40);
		overflow: hidden;
		margin-bottom: 24rpx;

		.item-title {
			width: 100%;
			height: 90rpx;
			padding: 0 24rpx;
			position: relative;

			.item-name {
				font-size: 12+30rpx;
				font-weight: bold;
				color: #101010;
				max-width: 300rpx;
			}

			.item-section {
				height: 44rpx;
				border-radius: 50rpx;
				background-color: rgba(230, 243, 255, 1);
				font-size: 12+24rpx;
				color: #3291F8;
				padding: 8rpx 20rpx;
				min-width: 108rpx;
				margin-left: 20rpx;
			}

			.item-status {
				position: absolute;
				right: 0;
				top: 25rpx;
				height: 62rpx;
				border-radius: 50rpx 0 0 50rpx;
				font-size: 12+24rpx;
				width: 150rpx;
				color: #101010;
				background: #f2f2f2;
			}

			.item-status1 {
				color: #3291F8;
				background: #E6F3FF;
			}

			.item-status2 {
				color: #FF0202;
				background: #FFEDE6;
			}
		}

		.item-content {
			padding: 0 24rpx;

			.item-content-text {
				padding-bottom: 24rpx;
				font-size: 12+24rpx;
				color: #797979;
			}
		}

		.item-bottom {
			padding: 0 24rpx;
			height: 62rpx;
			background: #F4F8FB;
			position: relative;

			.item-icon {
				width: 45rpx;
				height: 45rpx;
				margin-right: 18rpx;
			}

			.item-addr {
				max-width: 430rpx;
				flex: 1;
				font-size: 12+24rpx;
				color: #4B4B4B;
			}

			.item-btn {
				position: absolute;
				right: 24rpx;
				top: 6rpx;
				width: 129rpx;
				height: 50rpx;
				border-radius: 50rpx;
				background-color: rgba(50, 145, 248, 1);
				color: rgba(255, 255, 255, 1);
				font-size: 12+26rpx;
			}

			.item-btn0 {
				background-color: #F87D32;
			}
		}
	}
</style>